<template>
    <div>
        <div id="main" style="width: 700px;height:400px;float:left;"></div>
        <div id="piemain" style="width: 600px;height:400px;float:right;padding-right:40px;"></div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { searchgoodssales } from '../../../../api/api'

import * as echarts from 'echarts';



let Xdata = ref([])  //X轴数据
let Ydata = ref([])   //Y轴数据
let salesdata = ref([])

//查询各商品的销量
const getgoodslales = () => {
    searchgoodssales().then(res => {
        console.log(res);
        if (res.data.data.code == 200) {
            res.data.data.data.map(item => {
                Xdata.value.push(item.goodsname)
            })
            res.data.data.data.map(item => {
                Ydata.value.push(item.sales)
            })
            res.data.data.data.map(item => {
                salesdata.value.push(item.sales)
            })
            echarts.init(document.getElementById('main')).dispose()
            echarts.init(document.getElementById('piemain')).dispose()
            let myChart1 = echarts.init(document.getElementById('main'))
            let myChart2 = echarts.init(document.getElementById('piemain'))
            //柱状图
            let option1 = {
                title: {
                    text: "商品销量"
                },
                xAxis: {
                    data: Xdata.value,
                    type: 'category',
                    inverse: true,
                    animationDuration: 300,
                    animationDurationUpdate: 300,
                    axisTick: {
                        alignWidthLabel: true
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 40,
                        formatter: function (value) {
                            if (value.length > 5) {
                                return `${value.slice(0, 5)}...`
                            } else {
                                return value
                            }
                        }
                    }
                },
                yAxis: {
                    max: 'dataMax',
                    
                },
                series: [
                    {
                        realtimeSort: true,
                        name: '商品销量',
                        type: 'bar',
                        data: salesdata.value,
                        itemStyle: {
                            color: 'green',
                            borderColor: 'backer',
                            opacity: 0.6
                        },
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true
                        },
                        sort: 'descending'

                    }
                ],
                legend: {
                    show: true
                },
                animationDuration: 1000,
                animationDurationUpdate: 1000,
                animationEasing: 'linear',
                animationEasingUpdate: 'linear'
            }

            //饼形图
            let piedata = ref([])
            res.data.data.data.map(item1 => {
                piedata.value.push({
                    name: item1.goodsname,
                    value: item1.sales
                })
            })

            setTimeout(() => {
                console.log(piedata.value);

            }, 2000)
            let option2 = {
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'cross',
                        animation: true,     // 是否开启动画
                        animationDuration: 1000,     // 初始动画时长
                        animationDurationUpdate: 200,    // 数据更新动画的时长
                    }
                },
                legend: {
                    top: '',
                    left: 'center',
                    itemHeight: 5,

                },
                series: [
                    {
                        name: '销量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 24,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: piedata.value
                    }
                ]
            }
            myChart1.setOption(option1);
            myChart2.setOption(option2);
        }
    })
}
getgoodslales()


</script>